<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>



</body>
<script>

    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");

    // 全选
    // 点击全选  所有的单选跟随全选的状态
    checkAll.onclick = function () {
        // 所有的单选跟随全选的状态
        // 1. 获取全选的状态
        // 2. 所有单选跟随全选的状态

        var status = checkAll.checked;
        console.log(status);

        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }

    // 反选: 
    // 每次点击单选 => 判断所有的单选是否全都被选中 => 全都选中=> 反选,否则=>不反选
    // checkOneList[0].onclick = function () { }
    // checkOneList[1].onclick = function () { }
    // checkOneList[2].onclick = function () { }
    // checkOneList[3].onclick = function () { }

    for (var i = 0; i < checkOneList.length; i++) {  //循环绑定事件(页面加载时执行)
        var checkOne = checkOneList[i];
        checkOne.onclick = function () {
            // console.log(1111);

            // 每次点击单选 => 判断所有的单选是否全都被选中

            // 1. 计数法
            // 每次点击单选 => 从所有单选中统计被选中的个数
            // var count = 0;
            // for (var j = 0; j < checkOneList.length; j++) { // 计数统计(每次点击单选)
            //     var item = checkOneList[j];
            //     if (item.checked) {
            //         count++;
            //     }

            // }
            // console.log(count);

            // checkAll.checked = count == checkOneList.length ? true : false;

            // 2. 假设法  
            // 先设置一个假设条件 => 尝试从对立面推翻它   => 能推翻(假设不成立)  不能推翻(假设成立)

            // 常见应用:
            // (1) 判断一个集合中是否存在满足条件的元素 => 假设不存在 => 找到一个满足条件的元素则存在
            // (2) 集合中的元素是否都满足条件 (checkOneList是否存都被选中)  => 先假设全都满足条件 在找一个不满足条件的元素 即可推翻

            // var flag = true; //假设所有的单选框 都被选中 (假设法第二种应用)

            // for (var j = 0; j < checkOneList.length; j++) { // 计数统计(每次点击单选)
            //     var item = checkOneList[j];
            //     if (item.checked == false) { // 如果存在未被选中的元素 => 推翻假设
            //         flag = false;
            //         break;
            //     }
            // }

            // checkAll.checked = flag;


            // 判断所有的单选是否全都被选中  
            // 数组的方法中 every()  数组中的元素是否都满足条件

            // var flag = Array.from(checkOneList).every(function (item, index, array) {
            //     return item.checked == true;
            // })
            // console.log(flag);
            // checkAll.checked = flag;

            // var flag = Array.from(checkOneList).every((item) => {
            //     return item.checked == true;
            // })
            // checkAll.checked = flag;

            checkAll.checked = Array.from(checkOneList).every(item => item.checked == true);

        }
    }





</script>

</html>